<template>
	<view class="container">
		<cu-custom  :isBack="true">
			<block slot="backText"><text style="color:#fff">返回</text></block>
			<block slot="content">
				<text style="color:#fff">数据统计</text>
			</block>
		</cu-custom>
		
		<view class="page-form">
            <span class="page_form_title">呼叫数据 (今日)</span>
            <view class="page_form_left" style="border-right:#00aa00 1px solid;">
                <span>{{currentData['cdr_data']['all_count']}}</span><span>呼叫总数</span>
            </view>
            <view class="page_form_right">
                <view><span style="color:aqua">{{currentData['cdr_data']['jietong_count']}}</span><span>接通</span></view>
                <view><span style="color:#ff0000">{{currentData['cdr_data']['no_jietong_count']}}</span><span>未接通</span></view>
                <view><span style="color:orange">{{currentData['cdr_data']['husun_count']}}</span><span>呼损</span></view>
            </view>
		</view>
        
        <view class="page-echarts">
        	<u-tabs :list="tabCallList" :is-scroll="false" :current="tabCallCurrent" @change="changeTabCall" :bar-width="120"></u-tabs>
            <u-table class="page_table">
                <u-tr>
                    <u-th width="190rpx">日期</u-th>
                    <u-th>总数</u-th>
                    <u-th>接通</u-th>
                    <u-th>未接通</u-th>
                    <u-th>呼损</u-th>
                </u-tr>
                <scroll-view scroll-y show-scrollbar="true" class="custom-scrollbar">
                    <u-tr v-for="(item,index) in cdrData" :key="index">
                        <u-td width="190rpx">{{item.time}}</u-td>
                        <u-td>{{item.all_count}}</u-td>
                        <u-td>{{item.jietong_count}}</u-td>
                        <u-td>{{item.no_jietong_count}}</u-td>
                        <u-td>{{item.husun_count}}</u-td>
                    </u-tr>
                </scroll-view>
            </u-table>
        </view>
		
		<view class="page-form-order">
		    <span class="page_form_title">订单数据 (今日)</span>
		    <view class="page_form_left" >
		        <span>{{currentData['order_data']['order_count']}}</span><span>订单总数</span>
		    </view>
		    <view class="page_form_right">
		        <view><span style="color:aqua">{{currentData['order_data']['volume_count']}}</span><span>已审核</span></view>
		        <view><span style="color:#ff0000">{{currentData['order_data']['no_count']}}</span><span>未通过</span></view>
		        <view><span style="color:orange">{{currentData['order_data']['no_volume_count']}}</span><span>未审核</span></view>
		    </view>
		</view>
        
        <view class="page-echarts" style="margin-top:15rpx;">
        	<u-tabs :list="tabOrderList" :is-scroll="false" :current="tabOrderCurrent" @change="changeTabOrder" :bar-width="120"></u-tabs>
            <u-table class="page_table">
                <u-tr>
                    <u-th width="190rpx">日期</u-th>
                    <u-th>总数</u-th>
                    <u-th>已审核</u-th>
                    <u-th>未通过</u-th>
                    <u-th>未审核</u-th>
                </u-tr> 
                <scroll-view scroll-y show-scrollbar="true" class="custom-scrollbar">
                    <u-tr v-for="(item,index) in orderData" :key="index">
                        <u-td width="190rpx">{{item.time}}</u-td>
                        <u-td>{{item.order_count}}</u-td>
                        <u-td>{{item.volume_count}}</u-td>
                        <u-td>{{item.no_count}}</u-td>
                        <u-td>{{item.no_volume_count}}</u-td>
                    </u-tr>
                </scroll-view>
            </u-table>
        </view>
		
		<!-- <view class="page-echarts">
			<u-tabs :list="tabList" :is-scroll="false" :current="tabCurrent" @change="changeTab"></u-tabs>
            <canvas canvas-id="echarts_call_report" id="echarts_call_report" class="charts" @touchend="tapCall"/>
		</view> -->
		
		<u-toast ref="uToast" />
	</view>
</template>
<script>	
	import {
		mapState,
		mapGetters
	} from "vuex";
    
    // import * as echarts from "echarts";
    
    import {
        getSeatTodayReport,
        getSeatCallReportByTime,
        getSeatOrderReportByTime
    } from "@/api/report.js";

	export default {
		data() {
			return {
				tabCallList:[{
					name: '昨日'
				}, {
					name: '近一周'
				},{
					name: '近一月'
				}],
				tabCallCurrent:0,

                tabOrderList:[{
					name: '昨日'
				}, {
					name: '近一周'
				},{
					name: '近一月'
				}],
				tabOrderCurrent:0,
                
                currentData:{
                    'order_data':{},
                    'cdr_data':{}
                },
                
                cdrData:[],
                orderData:[]
            }
		},
		computed: {
			...mapGetters(["userInfo","callType"]),
			...mapState({
				callType: state => state.app.callType
			} )
		},
		onLoad(option) {
			console.log("setting onLoad");
            
		},
        
        onPullDownRefresh(){
            console.log("seatReport onpulldownrefresh");
            
            this.initData();
        },
		methods: {
            // 呼叫标签切换
			changeTabCall(val){
				console.log("changeTabCall val",val);
                
                this.tabCallCurrent = val;
                
                this.handleGetSeatCallReportByTime();
            },
            
            // 订单标签切换
            changeTabOrder(val){
            	console.log("changeTabOrder val",val);
                
                this.tabOrderCurrent = val;
                
                this.handleGetSeatOrderReportByTime();
            },
            
			//获取手机操作说明
			initData(){
				//获取手机系统信息
				let sys_info = uni.getSystemInfoSync();
				
				console.log("sys_info");
				console.log(sys_info);
				
                //获取当日呼叫  订单数据
                this.handleGetTodayReportData();
                
                //获取呼叫表格数据
                this.handleGetSeatCallReportByTime();
                
                //获取订单表格数据
                this.handleGetSeatOrderReportByTime();
                
                uni.stopPullDownRefresh();
			},
            
            //下拉刷新事件
            handleRefreshData(){
                this.initData();
            },
            
            //获取当日呼叫  订单数据
            handleGetTodayReportData(){
                getSeatTodayReport(this.userInfo).then(res=>{
                    console.log("getseattodayreport res",res);
                    
                    this.currentData = res.data.data;
                }).catch(err=>{
                    console.log("getseattodayreport err",err);
                });
            },
            
            //获取呼叫表格数据
            handleGetSeatCallReportByTime(){
                getSeatCallReportByTime({...this.userInfo,time_type:this.tabCallCurrent}).then(res=>{
                    console.log("getSeatCallReportByTime res",res);
                    
                    this.cdrData = res.data.data;
                }).catch(err=>{
                    console.log("getSeatCallReportByTime err",err);
                });
            },
            
            //获取订单表格数据
            handleGetSeatOrderReportByTime(){
                getSeatOrderReportByTime({...this.userInfo,time_type:this.tabOrderCurrent}).then(res=>{
                    console.log("getSeatOrderReportByTime res",res);
                    
                    this.orderData = res.data.data;
                }).catch(err=>{
                    console.log("getSeatOrderReportByTime err",err);
                });
            },
            
		},

		onReady() {
			//this.$refs.uForm.setRules(this.rules);
			console.log("setting onready");
			
			this.initData();
		}
	}
</script>

<style scoped>
.container {
	width: 100%;
	color: #333333;
    height:120vh;
    /* position: absolute; */
    top:0rpx;
	background-image: linear-gradient(to bottom, #4989ff, #ffffff);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: top center;
	overflow-y: scroll;
}

.echarts{
    width: 100%;
    height: 160px;
    background-color: #fff;
}

.page-form{
    width:96%;
    float:left;
    clear:both;
    margin-left:2%;
    height:15vh;
    padding:40rpx 30rpx;
    margin-top:40rpx;
    
    background-image:url("/static/order_report_bg.png");
    background-repeat: no-repeat;
    background-size: 101% 100%;
    
    box-shadow: 5px 5px 10px 10px rgba(135, 167, 255, 0.5);
    
    /* background: linear-gradient(90deg, #388dce 0%,#2a87d36e 50%, #2a87d36e 100%); */
}

.page-form-order{
    width:96%;
    float:left;
    clear:both;
    margin-left:2%;
    height:15vh;
    padding:40rpx 30rpx;
    margin-top:30rpx;
	
	border-radius: 20px;
    
    background-image:url("/static/report_bg.png");
    background-repeat: no-repeat;
    background-size: 101% 100%;
    
    box-shadow: 5px 5px 10px 10px rgba(135, 167, 255, 0.5);
    
    /* background: linear-gradient(90deg, #388dce 0%,#2a87d36e 50%, #2a87d36e 100%); */
}

.page_form_title{
    display: block;
    width:100%;
    border-left:#fff 3px solid;
    padding-left:20rpx;
	margin-bottom:30rpx;
    line-height:40rpx;
    font-size:32rpx;
    color:#fff;
}

.page_form_left{
    float:left;
    width:30%;
	
	border-right:#58a3ff 1px solid;
}

.page_form_left span{
    display: block;
    width:100%;
    text-align: center;
}

.page_form_left span:last-child{
    font-size:14px;
    color: #d0e5ff;
    line-height:35px;
}

.page_form_left span:first-child{
    font-size:23px;
    font-weight: bold;
    color: #3fd64b;
}

.page_form_right{
    float:right;
    width:68%;
    
}

.page_form_right view{
	width:33%;
	float:left;
}

.page_form_right span{
    display: block;
    width:100%;
    text-align: center;
}

.page_form_right view span:last-child{
    font-size:14px;
    color: #d0e5ff;
    line-height:35px;
}

.page_form_right view span:first-child{
    font-size:20px;
    font-weight: bold;
    color: #3fd64b;
}

.page_table{
    width:100%;
    height:auto;
    float:left;
    clear:both;
    padding-top:1rpx;
}

.page-echarts{
	width:96%;
	float:left;
	clear:both;
	margin-top:-10rpx;
    margin-left:2%;
    border-radius: 10px;
    overflow:hidden;
    
    border:#ccc 1px solid;
}

.custom-scrollbar {
  overflow-y: auto !important; /* 强制显示滚动条 */
  max-height:300rpx;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 8px; /* 滚动条宽度 */
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #888; /* 滑块颜色 */
  border-radius: 4px;
}
</style>